<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04_class与style绑定</title>
  <style>
    .classA {
      color: red;
    }
    .classB {
      background: blue;
    }
    .classC {
      font-size: 20px;
    }
  </style>
</head>
<body>

<!--
1. 理解
  在应用界面中, 某个(些)元素的样式是变化的
  class/style绑定就是专门用来实现动态样式效果的技术
2. class绑定: :class='xxx'
  xxx是字符串
  xxx是对象
  xxx是数组
3. style绑定
  :style="{ color: activeColor, fontSize: fontSize + 'px' }"
  其中activeColor/fontSize是data属性
-->

<div id="demo">
  <h2>1. class绑定</h2>
  <!-- 
    动态class字符串写法: 类名不确定
    动态class对象写法: 确定类名, 但不确定有没有
   -->
  <p class="classA" :class="myClass">xxxxxx</p>
  <p class="classA" :class="{classB: hasB, classC: hasC}">xxxxxx</p>
  <p :class="['classB', 'classC']">xxxxx</p>

  <h2>2. style绑定</h2>
  <p :style="{color: myColor, fontSize: mySize+'px'}">yyyyyyy</p>


  <button @click="update">更新</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    // el: '#demo'
    data () {
      return {
        myClass: 'classB',
        hasB: false,
        hasC: true,
        myColor: 'blue',
        mySize: 20
      }
    },

    methods: {
      update () {
        this.myClass = 'classC'
        this.hasB = !this.hasB
        this.hasC = !this.hasC
        this.myColor = 'green'
        this.mySize += 5
      }
    }
  }).$mount('#demo')
</script>
</body>
</html>